Homework SourseJavaFX Events Introduction The purpose of this assignment is
JavaFX Events
Introduction
The purpose of this assignment is to get you familiar with the basics of the JavaFX Events. In particular you will need to be familiar with ActionEvents and MouseClicked events
This game begins with all three cards showing the card back and it being right\'s turn to select a card. A card is selected by clicking the mouse on the middle card image. A card is randomly generated and assignment to the right label. The next card selected is assigned to the left. The two cards are then compared and the score updated on which ever card had a higher value. Ties are awarded no points but I should point out that in the deck the Ace of diamonds has a smaller value than the ace of spades. We will fix this later on. For now let\'s get the basic game going.
Link to download card images:
https://mega.nz/#!tBJD3YLZ!YjGYuP7d4-6Etq1J_i4o3XTNVqjqjyaIhIxkGgaSLGw
The Layout
The layout for this assignment uses a few different panes. To begin with, the root pane is set to a BorderPane. This will allow you to place other panes in top bottom, center, left or right. For this assignment only the top, center, and bottom are going to be used.
At the top of the game is the Labels and TextFields that hold the information about the progress of the game. You are going to need to create a GridPane for this. You can call it anything that you wish but topPane seems like a good name.
In the middle of the root layout is where the three card images are being displayed. This will also need to be a GridPane. Again, name this whatever you like but cardPane is what I will be referring to it as.
In the bottom of the root layout the reset button. It will simply be added without being apart of any other layout.
The Top Pane
In the field you are going to create all of the GUI components for the game. This needs to be done so that they can be referenced from the inner classes that make up the events.
To begin with you need to create a Label for the score. let\'s call it lblScore. It should have the text \"Score:\" inside it. Create a Font and a Color for the Label. You will apply these in the start method because you cannot do anything outside of creation of components in the field.
Create two TextFields one to hold Left\'s score and one to hold Right\'s score. Give them a meaningful name like tfLeft and tfRight.
In the start method for each of the TextFields call the setPrefWidth method giving a value of 50. Also call the setDisable method passing a value of true. Call the setText method and set the text to \"0\"
Also In the start method create the topPane (Remember, this is a GridPane) add lblScore to row 0 column 0. Don\'t forget to apply the Font and Color to it.
Add an informational anonymous label to the top topPane that says \"Left: \" to row 1 column 0. Add the TextField tfLeft to row 1 column 1.
Add an informational anonymous label to the top topPane that says \"Right: \" to row 1 column 2. Add the TextField tfRight to row 1 column 3.
Finally, set the Hgap of the topPane to 20 and the Vgap to 10 and add the topPane to the top of the root pane
The Center Pane
The cardPane has three Labels in it that hold each of the card images. Create three Labels in the field. You might want to consider calling them lblCardLeft, lblCardRight, and lblCardDeck. The middle card (lblCardDeck) is only going to hold the card back.
In the start method create the cardPane as a GridPane. Set the Hgap of the cardPane to 20.0. Add lblCardLeft to row 0 column 0, lblCardDeck to row 0 column 1, and lblCard right to row 0 column 2.
Set the alignment of cardPane to Pos.CENTER
Add the cardPane to the center of the root pane.
The Button
In the field create a Button called btnReset. Add the button to the bottom of the root pane. Don\'t worry about the event at this point we will come back to it.
Load Default Images
Create a new method called resetCardImages. Inside this method create three Images: imgCardLeft, imgCardRight, and imgCardDeck. Use the constructor to load image 155.gif for each of these. Call the setGraphic method on lblCardLeft, lblCardRight, and lblCardDeck. Set the graphic of each of them to a new ImageView. It should be something like this:
lblCardLeft.setGraphic(new ImageView(imgCardLeft));
Of course this needs to be done for all three cards
Inside the start method call the resetCardImages method you just completed. You are probably going to want to call this method before adding panes to the root pane.
Layout Check
At this point your layout should be done and your application should look like the one in the picture. Or at the very least similar depending on the creative license you took.
If your application does not look like the image above or does not run go back an fix any issues with if before moving on. If you cannot fix these issues then post questions in the discussion board. Be as specific as you can.
Mouse Click Event
At the top of the start method you are going to have to call the setOnMouseClicked method on lblCardDeck and set a new event handler to handle the game. The call should look something like this:
lblCardDeck.setOnMouseClicked(new EventHandler(){
@Override
public void handle(MouseEvent arg0) {
}
});
Once this is done the variables to handle the logistics need to be added. In the field create variables called rightVal, leftVal, and score. Set each these to 0. You will also need a variable to handle who\'s turn it is. Create a boolean variable called rigthtsTrun and set it equal to true.
Inside the handle method generate a random number between 101 and 152 (don\'t forget to import java.util.Random) Construct the card name as you did in assignment 3 using the random number you just generated.
The logic then is as follows:
If rightsTurn is true
Set rightVal = to the random number generated for the card number
create a new Image from the card name you constructed
Set the graphic on lblCardRight to a new ImageView using the image you just created
else
Set leftVal = to the random number generated for the card number
create a new Image from the card name you constructed
Set the graphic on lblCardLeft to a new ImageView using the image you just created
if rightVal > leftVal
set score equal to value stored in tfRight
increment score by 1
Set the text in tfRight to the new score
else if leftVal > rightVal
set score equal to value stored in tfLeft
increment score by 1
Set the text in tfLeft to the new score
Flip who\'s turn it is by setting rightsTurn = !rightsTurn.
Note:
The else if is used here to get around the tie. If we simply used else a tie would go to the left
At this point you should have a working game with the exception of the Reset button. If your game does not work go back through the logic and see if you can correct things.
If the logic completely escapes you then please ask on the discussion board. Be as specific as possible.
The Reset Button
At the top of the start method you need to call the setOnAction method and setup a new event handler. Button events are covered in the lecture material.
Inside the handle method you need to set the following
rightVal to 0
leftVal to 0
score to 0
tfRight to \"0\"
tfLeft to \"0\"
rigthTurn to true
Finally call the resetCardImages method
Finishing Up
At this point you should have a working game. If not then you need go back over your code and work on any bugs that you may have. If you get stuck then you need to ask questions on the discussion board. Please note the stating I am completely lost does not tell us anything about where you are having problems with this.
Make sure you post the solution as a .java file before the due date.
| The purpose of this assignment is to get you familiar with the basics of the JavaFX Events. In particular you will need to be familiar with ActionEvents and MouseClicked events This game begins with all three cards showing the card back and it being right\'s turn to select a card. A card is selected by clicking the mouse on the middle card image. A card is randomly generated and assignment to the right label. The next card selected is assigned to the left. The two cards are then compared and the score updated on which ever card had a higher value. Ties are awarded no points but I should point out that in the deck the Ace of diamonds has a smaller value than the ace of spades. We will fix this later on. For now let\'s get the basic game going. Link to download card images: https://mega.nz/#!tBJD3YLZ!YjGYuP7d4-6Etq1J_i4o3XTNVqjqjyaIhIxkGgaSLGw |
Solution
Lab4.java
package lab4;
import javafx.scene.text.*;
import javafx.application.Application;
import javafx.event.*;
import javafx.scene.image.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.Stage;
import java.util.Random;
import javafx.scene.paint.Color;
import javafx.geometry.*;
import javafx.scene.input.MouseEvent;
public class Lab4 extends Application {
//variables declared in Lab4 in order to be accessible from all the methods
public boolean rightsTurn = true;
int leftCounter = 0;
int rightCounter = 0;
int rightVal = 0;
int leftVal = 0;
//creating Textfields
TextField tf1 = new TextField();
TextField tf2 = new TextField();
//creating cards
Label lblCardLeft = new Label();
Label lblCardRight = new Label();
Label lblCardDeck = new Label();
Label testNum1 = new Label(\"\");
Label testNum2 = new Label(\"\");
// @Override
public void start(Stage primaryStage) {
//fonts and colors
Font font = new Font(\"Courier\", 25);
Font font2 = new Font (\"Courier New\", 20);
Color clr = Color.web(\"#0076a3\");
Color clr2 = Color.web(\"#FF0000\");
// label for scores
Label lblscore = new Label();
lblscore.setFont(font);
lblscore.setTextFill(clr);
lblscore.setText(\"Score: \");
//labels for textfields
Label left = new Label(\"Left:\" );
Label right = new Label(\"Right:\");
//creating reset button
Button btnreset = new Button();
btnreset.setText(\"reset\");
//Declaring variables used to assign image file name
int num;
String filename = null;
int num2;
String filename2 = null;
//reset action event. Resets all variables of game
btnreset.setOnAction (new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
rightVal = 0;
leftVal = 0;
rightCounter = 0;
leftCounter = 0;
tf1.setText( \"0\");
tf2.setText(\"0\");
rightsTurn = true;
// testNum1.setText(\"\");
// testNum2.setText(\"\");
resetCardImages(lblCardLeft,lblCardDeck,lblCardRight);
}
});
// Event Listener for when the center card is clicked
lblCardDeck.setOnMouseClicked(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent event) {
Random random = new Random();
if (rightsTurn == true) {
int num = random.nextInt(154 - 101 + 1) + 101;
rightVal = num;
String filename = Integer.toString(num) + \".gif\";
lblCardRight.setGraphic(new ImageView(\"file:img\\\\\"+filename));
// testNum1.setText(filename);
// ^test variable used to display filename on the canvas
rightsTurn = false;
}
else {
int num2 = random.nextInt(154 - 101 + 1) + 101;
String filename2 = Integer.toString(num2) + \".gif\";
leftVal = num2;
lblCardLeft.setGraphic(new ImageView(\"file:img\\\\\"+filename2));
// testNum2.setText(filename2);
// ^test variable used to display filename on the canvas
if (rightVal > leftVal) {
rightCounter = rightCounter + 1;
String rightScore = Integer.toString(rightCounter);
tf2.setText(rightScore);
}
else if (leftVal > rightVal) {
leftCounter = leftCounter + 1;
String leftScore = Integer.toString(leftCounter);
tf1.setText(leftScore);
}
else {
//nada
}
rightsTurn = !rightsTurn;
}
}
});
//Creating an image item and adding to a Label
Image imgCard = new Image(\"file:img\\\\\"+filename);
Label lblCard = new Label(\"\",new ImageView(imgCard));
lblCard.setGraphic(new ImageView(imgCard));
// Creating BorderPane and GridPane layouts, setting GridPane to be top of BorderPane and middle
BorderPane root = new BorderPane(); //root layout
GridPane top = new GridPane(); //top layout for scores
GridPane middle = new GridPane(); //center layout for cards
root.setTop(top);
root.setCenter(middle);
root.setBottom(btnreset);
top.setHgap(20);
top.setVgap(10);
top.add(lblscore, 0, 0);
top.add(new Label(\"left:\" ),0 ,2 );
top.add(new Label(\"right:\" ),2 ,2 );
top.add(tf1,1, 2);
top.add(tf2,3, 2);
middle.add(lblCardLeft,0,0); //add card left
// middle.add(testNum2,0,1);
middle.add(lblCardDeck,1,0); //add card center
middle.add(lblCardRight,2,0); // add card right
// middle.add(testNum1,2,1);
middle.setHgap(20); //create space between cards
middle.setAlignment(Pos.CENTER); // determine where the cards will alighn
Scene scene = new Scene(root, 600, 450);
primaryStage.setTitle(\"Assignment 4\");
primaryStage.setScene(scene);
primaryStage.show();
this.resetCardImages(lblCardLeft,lblCardDeck,lblCardRight);
}
public void resetCardImages(Label x, Label y, Label z) {
// reset the card images
Image imgCardLeft = new Image(\"file:img\\\\155.gif\");
x.setGraphic(new ImageView(imgCardLeft));
Image imgCardDeck = new Image(\"file:img\\\\155.gif\");
y.setGraphic(new ImageView(imgCardDeck));
Image imgCardRight = new Image(\"file:img\\\\155.gif\");
z.setGraphic(new ImageView(imgCardRight));
}
public static void main(String[] args) {
launch(args);
}
}
